<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref<boolean>(false)

const login = () => {
  console.log('登录成功...')
  isShow.value = true

  setTimeout(() => {
    isShow.value = false
  }, 1500)
}
</script>
<template>
  <div>演练场</div>

  <!-- 
    1. 出现之后需要小时
    2. 没有过渡动画效果
    3. 提示竟然需要我提前在页面中写个结构, 通过数据控制结构的显示隐藏(非主流)???
       应该是在页面中没有结构, 通过调用函数的形式, 弹出一个提示(主流)
       目标： 通过掉哟个函数的形式往页面中插入一个结构 h  render
   -->
  <button @click="login">登录</button>
  <XtxMessage v-show="isShow" type="success">登录成功</XtxMessage>
</template>
<style scoped></style>
